<template>
  <div class="custom-dialog">
    <el-dialog
      :align-center="true"
      :class="fullscreen ? '' : 'dialog-class-custom'"
      :modelValue="show"
      :width="width"
      :fullscreen="fullscreen"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      footer-hide
    >
      <slot name="header"></slot>
      <div class="header pdb38 mt42" v-if="showHeader">
          <div>{{ title }}</div>
          <img class="pointer" alt="" :src="closeIcon" @click="closeModal" />
      </div>
      <div class="custom-header flex-align-center" v-else>
        <div class="header-block flex-between">
          <div>{{ title }}</div>
          <div class="handler-btn flex-align-center">
            <div class="save-btn pointer" @click="submit" v-if="openModalType !== 'view'">保存</div>
            <div class="close-btn ml20 pointer" @click="closeModal">关闭</div>
          </div>
        </div>
      </div>
      <div class="content mt20">
        <slot name="content"></slot>
      </div>
      <slot name="footer" v-if="showFooter && showConfirmBtn">
        <div class="footer-custom" :class="fullscreen ? 'is-fullscreen' : ''">
          <div class="btn-cancel pointer mr10" @click="closeModal" v-if="showCancelBtn">取消</div>
          <div class="btn-save pointer" @click="submit">{{ submitText }}</div>
        </div>
      </slot>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, defineProps, computed, defineEmits } from "vue"

import closeIcon from "@/assets/images/close-modal.svg"

const emits = defineEmits(["update:show", "submit","close"])
const props = defineProps({
  width: {
    type: String,
    default: "50%"
  },
  fullscreen: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: ""
  },
  show: {
    type: Boolean,
    default: false
  },
  showConfirmBtn: {
    type: Boolean,
    default: true
  },
  showCancelBtn: {
    type: Boolean,
    default: false
  },
  submitText: {
    type: String,
    default: "保存"
  },
  showFooter: {
    type: Boolean,
    default: true
  },
  showHeader: {
    type: Boolean,
    default: true
  },
  openModalType: { // 打开弹窗类型 add edit view copy...
    type: String,
    default: ""
  },
  draggable: {
    type: Boolean,
    default: false
  }
})

computed({
  get() {
    return props.show
  },
  set(value) {
    emits("update:show", value)
  }
})

const closeModal = () => {
  emits("update:show", false)
  emits("close")
}

const submit = () => {
  emits("submit")
}
</script>

<style lang="scss" scoped>
@use "@/assets/style/themes.scss" as *;
.custom-dialog {
  :deep(.is-fullscreen) {
    &::-webkit-scrollbar {
      width: 8px;
      height: 0;
      background-color: rgba(240, 240, 240, 1);
    }
    /*定义滚动条轨道 内阴影+圆角*/
    &::-webkit-scrollbar-track {
      box-shadow: inset 0 0 0 rgba(240, 240, 240, 0.5);
      border-radius: 1px;
      background-color: rgba(240, 240, 240, 0.5);
    }
    /*定义滑块 内阴影+圆角*/
    &::-webkit-scrollbar-thumb {
      border-radius: 11px;
      box-shadow: inset 0 0 0 rgba(50, 131, 236, 0.5);
      background-color: rgba(180, 187, 197);
    }
  }
  :deep(.dialog-class-custom) {
    border-radius: 10px;
  }
  :deep(.el-dialog) {
    .el-dialog__header {
      display: none;
    }
    .el-dialog__body {
      padding: 0 30px 40px 30px !important;
    }
  }
  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 24px;
    color: #333333;
    //margin: 0 20px 0 20px;
    border-bottom: 1px solid #f2f2f2;
    font-weight: 700;

  }
  .content {
    padding-bottom: 20px;
  }
  .footer-custom {
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid #f2f2f2;
    padding-top: 40px;
    .btn-save,.btn-cancel {
      min-width: 126px;
      padding: 16px;
      border-radius: 6px;
      text-align: center;
      color: #fff;
      @include default-bgcolor;
    }
    .btn-cancel {
      border: 1px solid #D8D8D8;
      border-radius: 8px;
      color: #999999;
      background: #EEEEEE;
    }
  }
  .is-fullscreen {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding-bottom: 20px;
    background-color: #fff;
  }

}
.pdb38 {
  padding-bottom: 38px;
}
.mt42 {
  margin-top: 42px !important;
}
.header-block {
  width: 100%;
  font-size: 24px;
  color: #333333;
  font-weight: 700;
  border-bottom: 1px solid #f2f2f2;
  padding-bottom: 10px;
  margin: 20px 0;
  .handler-btn {
    font-weight: 700;
    font-size: 14px;
    .save-btn,
    .close-btn {
      padding: 17px 26px;
      border-radius: 8px;
    }
    .save-btn {
      background: #016fff;
      color: #fff;
    }
    .close-btn {
      border: 1px solid #d9d9d9;
      color: #999999;
      background: #eeeeee;
    }
  }
}
</style>
